<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>7.天气作业完整版</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
  </head>
  <body>
    <!-- 准备好一个容器-->
    <div id="app">
      <h1>今天天气：{{weather}}</h1>
      <h1>应该：{{str}}</h1>
      <button @click="change">点击切换</button>
    </div>
  </body>

  <script type="text/javascript">
    //阻止 vue 在启动时生成生产提示。
    Vue.config.productionTip = false;

    // new Vue({
    //   el: "#app",
    //   data: {
    //     bol: true,
    //     str: "",
    //   },
    //   methods: {
    //     change() {
    //       this.bol = !this.bol;
    //     },
    //   },
    //   computed: {
    //     weather: {
    //       get() {
    //         return this.bol ? "炎热" : "冷";
    //       },
    //     },
    //   },
    //   watch: {
    //     bol: {
    //       handler() {
    //         this.str = this.bol ? "少穿点衣服" : "多穿点衣服";
    //       },
    //       immediate:true  // 立即执行
    //     },
       
    //   },
    // });
    // new Vue({
    //   el: "#app",
    //   data: {
    //     bol: true,
    //     str: "",
    //   },
    //   methods: {
    //     change() {
    //       this.bol = !this.bol;
    //     },
    //   },
    //   computed: {
    //     weather: {
    //       get() {
    //         return this.bol ? "炎热" : "冷";
    //       },
    //     },
    //   },
    //   watch: {
    //     bol: {
    //       handler() {
    //         this.str = this.bol ? "少穿点衣服" : "多穿点衣服";
    //       },
    //       immediate:true  // 立即执行
    //     },
       
    //   },
    // });
    new Vue({
      el: "#app",
      data: {
        bol: true,
        str: "",
      },
      methods: {
        change() {
          this.bol = !this.bol;
        },
      },
      computed: {
        weather: {
          get() {
            return this.bol ? "炎热" : "冷";
          },
        },
      },
      watch: {
        bol: {
          handler() {
            this.str = this.bol ? "少穿点衣服" : "多穿点衣服";
          },
          immediate:true  // 立即执行
        },
       
      },
    });
  </script>
</html>
